<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>CMS后台管理系统</title>

<!-- Bootstrap core CSS-->
<link href="/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template-->
<link href="/libs/fontawesome-free/css/all.min.css" rel="stylesheet"
	type="text/css">

<!-- Custom styles for this template-->
<link href="/libs/sb-admin/sb-admin.css" rel="stylesheet">

</head>

<body id="page-top">

	<!-- 后台管理系统顶部 -->
	<jsp:include page="_inc_top.jsp" />

	<div id="wrapper">

		<!-- 后台管理系统左部菜单 -->
		<jsp:include page="_inc_left.jsp" />

		<div id="content-wrapper">

			<div class="container-fluid">

				<!-- 面包屑 -->
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="/admin/home">后台首页</a></li>
					<li class="breadcrumb-item active">栏目管理</li>
				</ol>

				<!-- Page Content -->
				<h1>栏目管理</h1>

				<form >
					
					<a href="/channel/toAddchannel"><button type="button" class="btn btn-primary">添加</button></a>
				</form>

				<hr>
				<table class="table table-striped table-bordered table-hover">
							<thead>
								<tr class="info">
									<th width="15%">栏目名称</th>
									<th width="20%">栏目说明</th>
									<th width="20%">栏目图标</th>
									<th width="10%">排序</th>
									<th width="35%">操作</th>
								</tr>
							</thead>
							<tbody class="">
								<c:forEach items="${channels}" var="channel">
									<tr id="item_${channel.id}">
										<td>${channel.name}</td>
										<td>${channel.description}</td>
										<td><img alt="" src="${channel.icon}" width="50" height="50"></td>
										<td>${channel.sorted}</td>
										<td>
										<button type="button" <c:if test="${channel.status ==1 }">disabled</c:if> class="upBtn btn btn-success btn-sm" channelId="${channel.id}">上移</button>
										<button type="button" <c:if test="${channel.status== 0}">disabled</c:if> class="downBtn btn btn-success btn-sm" channelId="${channel.id}">下移</button>
										<button type="button" class="updateBtn btn btn-success btn-sm" channelId="${channel.id}">编辑</button>
									<button type="button" class="removeBtn btn btn-success btn-sm" onclick="removechannel(${channel.id});">删除</button>
									</tr>
								</c:forEach>
							</tbody>
						</table>
			</div>
			<!-- /.container-fluid -->

			<!-- Sticky Footer -->
			<footer class="sticky-footer">
				<div class="container my-auto">
					<div class="copyright text-center my-auto">
						<span>Copyright © Your Website 2018</span>
					</div>
				</div>
			</footer>

		</div>
		<!-- /.content-wrapper -->

	</div>
	<!-- /#wrapper -->

	<!-- Scroll to Top Button-->
	<a class="scroll-to-top rounded" href="#page-top"> <i
		class="fas fa-angle-up"></i>
	</a>

	<!-- Logout Modal-->
	<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog"
		aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
					<button class="close" type="button" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
				</div>
				<div class="modal-body">Select "Logout" below if you are ready
					to end your current session.</div>
				<div class="modal-footer">
					<button class="btn btn-secondary" type="button"
						data-dismiss="modal">Cancel</button>
					<a class="btn btn-primary" href="/user/login">Logout</a>
				</div>
			</div>
		</div>
	</div>

	<!-- Bootstrap core JavaScript-->
	<script src="/libs/jquery/jquery.min.js"></script>
	<script src="/libs/bootstrap/js/bootstrap.bundle.min.js"></script>

	<!-- Custom scripts for all pages-->
	<script src="/libs/sb-admin/sb-admin.min.js"></script>

	<script type="text/javascript">
	$(function() {

		$(".upBtn").click(
				function() {
					location = "/channel/upMove?channelId="
							+ $(this).attr("channelId")
				});
		$(".downBtn").click(
				function() {
					location = "/channel/downMove?channelId="
							+ $(this).attr("channelId")
				});
		$(".updateBtn").click(
				function() {
					location = "/channel/toEditChannel?channelId="
							+ $(this).attr("channelId")
				});
	})
	function removechannel(id){
			if(confirm("您是否要删除此栏目？")){
				$.ajax({
					url:'/channel/removeChannel?id=' + id,
					type:'get',
					success:function(data){
						console.log(data);
						if(data.status){
							$("#item_" + id).remove();
						}else{
							alert(data.message);
						}
					}
				});
			}
			return false;
		}
	</script>

</body>

</html>
